<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            width: 500px;
            margin:100px auto;
            font:20px/30px microsoft yahei;
        }
    </style>
</head>
<body>
<form action="">
    爱好： <input type="checkbox" name="box">打球 <input type="checkbox" name="box">看电影
    <input type="checkbox" name="box">看书 <input type="checkbox" name="box">听歌
    <input type="checkbox" name="box">健身
</form>
<script>
    //选择项数最多只能为3项，超过的项数则禁止编辑，警示框进行提醒；重新编辑，解除禁止编辑
    var oForm=document.getElementsByTagName("form")[0];
    var bool=false;
    oForm.onchange=function(){
        var cont=0;
            for(var i=0;i<oForm.box.length;i++){
                if(oForm.box[i].checked){
                cont++;
            }
                 if(cont>2){
                     for(var j=0;j<oForm.box.length;j++){
                         if(!oForm.box[j].checked){
                             oForm.box[j].disabled="disabled";
                         }
                 }
                     alert("最多只可选择三项呦！");
                     break;
             }else{
                     for(var j=0;j<oForm.box.length;j++){
                         if(!oForm.box[j].checked){
                             oForm.box[j].disabled="";
                         }
                     }
                 }
        }
    }
</script>
</body>
</html>